<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>04-display-练习</title>
    <style>
        .mail li {
            list-style: none;
        }

        .mail li a {
            text-decoration: none;
            font-size: 10px;
            color: #000;
            display: block;
        }
        
        .mail li a:hover {
            background-color: #0ff;
        }

        .mail ul {
            padding: 0;
            margin: 0;
            display: none;
            /*visibility: hidden;*/
            border: 1px solid #999;
            /*text-align: center;*/
            /*width: 100px;*/
        }
        
        .mail .title {
            background-color: #999;
            color: #fff;
            display: block;
            /*text-align: center;*/
            /*width: 100px;*/
        }

        /*.mail .title:hover+ul {
            display: block;
        }*/
        
        .mail {
            width: 100px;
            text-align: center;
        }

        /* 当鼠标移动到.mail上时，将它里面的ul元素显示出来 */
        .mail:hover ul {
            display: block;
            /*visibility: visible;*/
        }
    </style>
</head>
<body>

<div class="mail">
    <span class="title">邮箱</span>
    <ul>
        <li><a href="http://www.baidu.com">QQ邮箱</a></li>
        <li><a href="http://www.baidu.com">126邮箱</a></li>
        <li><a href="http://www.baidu.com">139邮箱</a></li>
    </ul>
</div>

</body>
</html>